
<template>
  <!-- 导入 -->
  <div style="margin-top:30px">
    <!-- form -->
    <avue-form
      :option="formOption"
      v-model="form"
    >
    </avue-form>
    <avue-crud
      ref="crud"
      :data="tableData"
      :option="tableOption"
      @selection-change="selectionChange"
    >
      <template
        slot-scope="{row}"
        slot="amount"
      >
        <avue-input-number
          v-model="row.amount"
          :precision="2"
          controls-position
        ></avue-input-number>
      </template>
      <template
        slot-scope="{row}"
        slot="tradeTime"
      >
        <avue-date
          v-model="row.tradeTime"
          format="yyyy年MM月dd日"
          value-format="yyyy-MM-dd"
          placeholder="请选择日期"
        ></avue-date>
      </template>
      <template
        slot-scope="{row}"
        slot="supShortAmount"
      >
        {{row.supShortAmount | rcaNumberFormat}}
      </template>
      <template
        slot-scope="{row}"
        slot="supUnloadAmount"
      >
        {{row.supUnloadAmount | rcaNumberFormat}}
      </template>
      <template slot="menuRight">
        <el-button
          type="primary"
          size="small"
          @click="handleCreateClick"
        >添加</el-button>
        <el-button
          type="primary"
          size="small"
          @click="handleDelete"
        >删除</el-button>
      </template>
    </avue-crud>

    <div style="text-align: center; margin: 40px">
      <el-button
        :loading="uploading"
        type="primary"
        @click="handleSubmit"
      >确认</el-button>
      <el-button
        :loading="uploading"
        @click="handleCancel"
      >取消</el-button>
    </div>
  </div>
</template>

<script>
import { addObj, getUnloadShortAmount, listSubWayStation } from '@/api/rca/swckbankcashpaymentnote'
import { tableOption } from '@/const/crud/rca/swckbankcashpaymentnote'
import { dateFormat } from '@/util/date';
import { rcaNumberFormat } from '@/const/crud/rca/common'

let id = 0;
export default {
  name: "CreateBankBill",
  components: {
    // TempData,
  },
  filters: {
    rcaNumberFormat(val){
      return rcaNumberFormat(val, true)
    }
  },
  data () {
    return {
      form: {
        lineCode: null,
        stationCode: null,
      },
      tableData: [],
      selection: [],
      uploading: false
    }
  },
  props: ["dialogImportVisible", "defaultBank"],
  computed: {
    tableOption () {
      return {
        addBtn: false,
        refreshBtn: false,
        columnBtn: false,
        menu: false,
        selection: true,
        column: [
          {
            label: '线路',
            prop: 'lineCode',
            type: 'select',
            props: {
              label: 'name',
              value: 'code'
            },
            cascaderItem: ['stationCode'],
            dicUrl: `/rca/swckbankcashpaymentnote/listAllSubWayLine?dataType=2`,
          },
          {
            label: '站点',
            prop: 'stationCode',
            type: 'select',
            props: {
              label: 'name',
              value: 'code'
            },
            dicUrl: `/rca/swckbankcashpaymentnote/listSubWayStation?dataType=2&lineCode={{key}}`,
          },
          {
            label: '金额',
            prop: "amount",
            type: 'number',
            slot: true
          }, {
            "type": "date",
            "label": "交易日期",
            "prop": "tradeTime",
            slot: true
          }, {
            "type": "input",
            "label": "入账开始日期",
            "prop": "entryStartTime",
          }, {
            "type": "input",
            "label": "入账结束日期",
            "prop": "entryEndTime",
          }, {
            label: '补短款金额',
            prop: "supShortAmount",
            "type": "input",
            formatter: (row, value, label, column) => {
              return rcaNumberFormat(value, true)
            },
          }, {
            label: '补卸载金额',
            prop: "supUnloadAmount",
            "type": "input",
            formatter: (row, value, label, column) => {
              return rcaNumberFormat(value, true)
            },
            hide: true,
            display: false
          }]
      }
    },
    formOption () {
      return {
        emptyBtn: false,
        submitBtn: false,
        column: [{
          label: '线路',
          prop: 'lineCode',
          type: 'select',
          props: {
            label: 'name',
            value: 'code'
          },
          cascaderItem: ['stationCode'],
          dicUrl: `/rca/swckbankcashpaymentnote/listAllSubWayLine?dataType=2`,
          rules: [
            {
              required: true,
              message: '请选择线路',
              trigger: 'blur'
            }
          ]
        },
        {
          label: '站点',
          prop: 'stationCode',
          type: 'select',
          props: {
            label: 'name',
            value: 'code'
          },
          dicUrl: `/rca/swckbankcashpaymentnote/listSubWayStation?dataType=2&lineCode={{key}}`,
          rules: [
            {
              required: true,
              message: '请选择站点',
              trigger: 'blur'
            }
          ]
        },]
      }
    }
  },
  watch: {
    'form.lineCode': async function (val) {
      this.updateAll()
    },
    'form.stationCode': function () {
      this.updateAll()
    },

    'tableData': {
      handler: function (newVal, oldval) {
        this.updateAll()
      },
      deep: true
    },
  },
  methods: {
    handleCreateClick () {
      if (!this.form.stationCode || !this.form.lineCode) {
        this.$message.error('线路和站点不能为空')
        return
      }
      this.tableData.push({
        stationCode: this.form.stationCode,
        lineCode: this.form.lineCode,
        supShortAmount: '自动获取',
        supUnloadAmount: '自动获取',
        entryStartTime: '自动获取',
        entryEndTime: '自动获取',
        id: id++,
      })
    },
    handleDelete () {
      this.tableData = this.tableData.filter(d => !this.selection.includes(d.id))
    },
    selectionChange (list) {
      this.selection = list.map(l => l.id);
    },
    async updateInfo (item) {
      const { lineCode, stationCode, tradeTime } = item;
      const dataType = "2";
      if (lineCode && stationCode && tradeTime) {
        const { data: { data: { supShortAmount, supUnloadAmount, entryStartTime, entryEndTime } } } = await getUnloadShortAmount({
          lineCode, stationCode, tradeTime, dataType
        })
        Object.assign(item, { supShortAmount, supUnloadAmount, entryStartTime, entryEndTime })
      }
    },
    async updateAll () {
      const arr = this.tableData.map(item => new Promise(async (resolve, reject) => {
        await this.updateInfo(item)
        resolve()
      }))
      await Promise.all(arr)
      this.$forceUpdate();
    },
    async handleSubmit (form) {
      if (this.tableData.find(item => {
        return [undefined, null].includes(item.tradeTime) || [undefined, null].includes(item.amount)
      })) {
        this.$message.error('提交前请完善列表内的信息')
        return
      }
      this.uploading = true;
      try {
        const arr = this.tableData.map(item => new Promise(async (resolve, reject) => {
          await addObj({
            ...item,
            ...this.form,
            dataSource: '1',
            dataType: '2',
            amount: item.amount * 100
          })
          resolve()
        }))
        await Promise.all(arr)
        this.$message('添加成功')
        this.handleClose()
        this.uploading = false;
      } catch (e) {
        this.uploading = false;
      }
    },
    handleClose () {
      this.$emit("close");
    },
    handleCancel () {
      this.handleClose();
    },
  },
};
</script>
<style lang="scss">
</style>
